<template>
  <div class="temp">
    <div class="title">中央厨房环境状态大屏</div>
    <div class="main">
      <div class="area">
        <div class="bg">
          <ul class="nav">
            <li>
              <div class="block bg_cyan"></div>
              <div>房间正常区域</div>
            </li>
            <li>
              <div class="block bg_red"></div>
              <div>房间异常区域</div>
            </li>
            <li>
              <div class="block bg_blue"></div>
              <div>不监控区域</div>
            </li>
          </ul>
          <div
            class="pa"
            v-for="(item, index) in staticRoom"
            :key="index"
            :style="item.style | objToStr"
          >{{item.name}}</div>
          <ul>
            <li class="blocks" v-for="(item, index) in combineRoomList" :key="index">
              <img
                class="pa main_img"
                :style="item.style | objToStr"
                :src="require(`../assets/images/temp/${item.id}_${item.status}.svg`)"
                alt
              >
              <div class="pa article" :style="item.nameStyle | objToStr">{{item.name}}</div>
              <img
                :style="`bottom: ${item.nameStyle.bottom + 10}px;left: ${item.nameStyle.left - 100}px;`"
                class="pa tip"
                :src="require(`../assets/images/temp/tip_${item.status}.svg`)"
                alt
              >
              <div
                class="pa tip_article"
                :style="`bottom: ${item.nameStyle.bottom + 48}px;left: ${item.nameStyle.left - 80}px;`"
              >
                <div style="margin-bottom: 5px;">温度：{{item.temp}} °C</div>
                <div>湿度：{{item.hum}} %</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="room_data">
        <el-table :data="combineRoomList">
          <el-table-column prop="name" label="房间">
            <template slot-scope="scope">
              <span :class="scope.row.status === 0 ? 'c_red' : 'c_white'">{{scope.row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="temperature" label="温度">
            <template slot-scope="scope">
              <span :class="scope.row.status === 0 ? 'c_red' : ''">{{scope.row.temp}}°C</span>
            </template>
          </el-table-column>
          <el-table-column prop="humidity" label="湿度">
            <template slot-scope="scope">
              <span :class="scope.row.status === 0 ? 'c_red' : ''">{{scope.row.hum}}%</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>

import { getKitchenTempList } from "@/api/index";
export default {
  data() {
    return {
      roomList: [
        {
          id: 6,
          name: "肉类熟制间",
          style: { width: 502, bottom: 262, left: 380 },
          nameStyle: { bottom: 320, left: 540 }
        },
        {
          id: 8,          
          name: "熟制品内包间",
          style: { width: 588, bottom: 466, left: 290 },
          nameStyle: { bottom: 504, left: 582 }
        },
        {
          id: 22,
          name: "成品保鲜库",
          style: { width: 110, bottom: 690, left: 766 },
          nameStyle: { bottom: 710, left: 788 }
        },
        {
          id: 23,
          name: "成品冷冻库",
          style: { width: 128, bottom: 690, left: 880 },
          nameStyle: { bottom: 710, left: 940 }
        },
        {
          id: 33,
          name: "原料冷冻库",
          style: { width: 218, bottom: 426, left: 1028 },
          nameStyle: { bottom: 450, left: 1150 }
        },
        {
          id: 34,
          name: "原料保鲜库",
          style: { width: 218, bottom: 24, left: 1028 },
          nameStyle: { bottom: 388, left: 1040 }
        }
      ],
      combineRoomList: [],
      staticRoom: [
        { name: "清洗间", style: { bottom: 776, left: 792 } },
        { name: "外包清洁区", style: { bottom: 776, left: 900 } },
        { name: "消防控制室", style: { bottom: 730, left: 1030 } },
        { name: "操作室", style: { bottom: 770, left: 1122 } },
        { name: "更衣室", style: { bottom: 800, left: 1186 } },
        { name: "操作室", style: { bottom: 718, left: 1122 } },
        { name: "化验室", style: { bottom: 704, left: 1194 } },
        { name: "外包装间", style: { bottom: 642, left: 858 } },
        { name: "设备室", style: { bottom: 656, left: 1050 } },
        { name: "缓冲", style: { bottom: 652, left: 1136 } },
        { name: "内包材仓库", style: { bottom: 606, left: 1044 } },
        { name: "日杂库", style: { bottom: 600, left: 1160 } },
        { name: "生制品包装间", style: { bottom: 538, left: 896 } },
        { name: "常温食材库", style: { bottom: 534, left: 1150 } },
        { name: "蔬菜分切间", style: { bottom: 268, left: 906 } },
        { name: "研发区", style: { bottom: 174, left: 1080 } },
        { name: "拆包间", style: { bottom: 64, left: 938 } },
        { name: "肉类腌制间", style: { bottom: 170, left: 760 } },
        { name: "蔬菜前处理", style: { bottom: 64, left: 768 } },
        { name: "肉类分割间", style: { bottom: 172, left: 486 } },
        { name: "肉类前处理", style: { bottom: 64, left: 568 } },
        { name: "配料间", style: { bottom: 64, left: 436 } },
        { name: "洗手消毒间", style: { bottom: 530, left: 42 } },
        { name: "风淋室", style: { bottom: 530, left: 202 } },
        { name: "女更衣室", style: { bottom: 478, left: 34 } },
        { name: "男更衣室", style: { bottom: 478, left: 170 } },
        { name: "冷却间", style: { bottom: 478, left: 294 } },
        { name: "成熟间", style: { bottom: 384, left: 152 } },
        { name: "工具清洗间", style: { bottom: 276, left: 90 } },
        { name: "工具保洁间", style: { bottom: 202, left: 90 } },
        { name: "成型间", style: { bottom: 232, left: 306 } },
        { name: "洗手消毒间", style: { bottom: 130, left: 26 } },
        { name: "风淋室", style: { bottom: 130, left: 172 } },
        { name: "女更衣室", style: { bottom: 64, left: 36 } },
        { name: "男更衣室", style: { bottom: 64, left: 170 } },
        { name: "换鞋区", style: { bottom: 8, left: 110 } },
        { name: "搅拌间", style: { bottom: 66, left: 306 } }
      ],
      timer: null
    };
  },
  mounted() {
    this.getRoomList();
    this.timer = setInterval(() => {
      this.getRoomList();
    }, 10000)
  },
  methods: {
    async getRoomList() {
      let res = await getKitchenTempList();
      if (res.code != "100") {
        console.log("network error");
        return;
      }
      let data = res.data.tempList;
      let resRoomList = data.filter(item => {
        return item.monitor === 1;
      });
      this.combineRoomList = this.combineArr(resRoomList, this.roomList);
    },
    combineArr(srcArr, parameArr) {
      let newArr = srcArr.map((item, index) => {
        let tempList = {};
        parameArr.some(val => {
          if (item.id === val.id) {
            tempList = Object.assign({}, val, item);
            return true;
          }
        });
        return tempList;
      });
      return this.addRoom(newArr, parameArr);
    },
    //在没有数据或者房间数据缺少的时候显示房间
    addRoom(srcArr, parameArr){
      parameArr.forEach(item => {
        let flag = srcArr.some(val => {
          if(item.id === val.id){
            return true;
          }
        })
        if(!flag){
          item.status = 1;
          srcArr.push(item);
        }
      })
      return srcArr;
    },
  },
  filters: {
    objToStr(styleObj) {
      let styleStr = "";
      let noPX = ["width", "height", "top", "left", "bottom"];
      for (let prop in styleObj) {
        if (styleObj.hasOwnProperty(prop)) {
          if (!noPX.includes(prop)) {
            styleStr += prop + ":" + styleObj[prop] + ";";
          } else {
            styleStr += prop + ":" + styleObj[prop] + "px;";
          }
        }
      }
      return styleStr;
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="less">
.temp {
  height: 1080px;
  width: 1920px;
  min-height: 1080px;
  min-width: 1920px;
  max-width: 1920px;
  max-height: 1080px;
  text-align: left;
  color: #fff;
  display: flex;
  flex-direction: column;
  background-image: url("../assets/images/background.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  .title {
    text-align: center;
    background-image: url("../assets/images/top.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    height: 86px;
    line-clamp: 86px;
    font-size: 36px;
  }
  .main {
    margin: 10px 0;
    flex: 1;
    display: flex;
    .area {
      width: 1390px;
      background-image: url("../assets/images/equipment/b_border.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;
      margin-left: 40px;
      margin-right: 12px;
      display: flex;
      .bg {
        width: 1240px;
        height: 820px;
        background-image: url("../assets/images/temp/main.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        position: relative;
        top: 80px;
        left: 60px;
      }
      .nav {
        position: absolute;
        top: 116px;
        left: 0;
        display: flex;
        list-style: none;
        li {
          width: 150px;
          display: flex;
          align-items: center;
          .block {
            width: 20px;
            height: 20px;
            margin-right: 10px;
          }
        }
      }
    }
    .room_data {
      width: 446px;
      background-image: url("../assets/images/temperature/l_border.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;
      padding: 20px 30px;
      margin: 0 10px;
    }
  }
}
</style>

<style lang="less">
.el-table thead {
  background-color: rgba(255, 255, 255, 0) !important;
  th {
    font-weight: 700 !important;
  }
}
.c_white {
  color: #fafafa;
}
.c_red {
  color: #ff2828;
}
.c_cyan {
  color: cyan;
}
.c_blue {
  color: #1259e9;
}
.bg_red {
  background-color: #ff2828;
}
.bg_cyan {
  background-color: cyan;
}
.bg_blue {
  background-color: #1259e9;
}
ul,
li {
  margin: 0;
  padding: 0;
}
.pa {
  position: absolute;
}
.pr {
  position: relative;
}
</style>
